<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>联系我们</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <style>
        /* 全局样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            background-color: #f4f4f4;
        }

        /* 页面头部样式 */
        header {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 20px;
        }

        /* 主要内容区域样式 */
        main {
            padding: 20px;
            background-color: white;
            margin: 20px auto;
            max-width: 800px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        /* 标题样式 */
        h2 {
            margin-bottom: 15px;
            border-bottom: 2px solid #333;
            padding-bottom: 5px;
        }

        /* 联系方式部分样式 */
        #contact-info {
            margin-bottom: 30px;
        }

        #contact-info p {
            margin-bottom: 10px;
        }

        /* 用户反馈表单样式 */
        form {
            margin-top: 20px;
        }

        label {
            display: block;
            margin-bottom: 5px;
        }

        input[type="text"],
        input[type="email"],
        textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        button {
            background-color: #007BFF;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>

<body>
<!-- 顶部导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">汽车商城</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" href="#" data-page="index" data-url="/dev/views/UserIndex.html">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#" data-page="purchase-guide" data-url="/dev/views/gczl2.html">购车指南</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#" data-page="contact-us" data-url="/dev/views/lxwm2.html">联系我们</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- 主要内容区域 -->
<main>
    <!-- 联系方式展示 -->
    <section id="contact-info">
        <h2>联系方式</h2>
        <p>如果您有任何疑问、建议或需要进一步的帮助，请通过以下方式与我们联系：</p>
        <p><strong>电话：</strong>1234567890</p>
        <p><strong>邮箱：</strong>info@example.com</p>
        <p><strong>地址：</strong>XX市XX区XX街道XX号</p>
    </section>

    <!-- 用户反馈表单 -->
    <form id="feedback-form">
        <h2>用户反馈</h2>
        <label for="name">姓名：</label>
        <input type="text" id="name" required>
        <label for="email">邮箱：</label>
        <input type="email" id="email" required>
        <label for="name">留言：</label>
        <textarea id="message" rows="5" required></textarea>
        <button type="submit">提交反馈</button>
        </section></form>
</main>

<script>
    // 等待页面加载完成
    window.onload = function () {
        // 获取所有的导航链接元素
        var navLinks = document.querySelectorAll('.navbar-nav a');

        // 遍历每个导航链接元素
        navLinks.forEach(function (link) {
            // 为每个导航链接添加点击事件
            link.addEventListener('click', function (e) {
                e.preventDefault(); // 阻止默认的链接跳转行为

                // 获取链接元素上的自定义数据属性值
                const page = this.dataset.page;
                const url = this.dataset.url;

                // 根据页面标识进行一些额外的操作（这里可根据实际需求扩展，比如记录页面访问日志等）
                if (page === "index") {
                    console.log("即将跳转到首页");
                } else if (page === "purchase-guide") {
                    console.log("即将跳转到购车指南页");
                } else if (page === "contact-us") {
                    console.log("即将跳转到联系我们页");
                }

                // 执行跳转
                window.location.href = url;
            });
        });
    };

    // 获取表单元素
    const feedbackForm = document.getElementById('feedback-form');

    // 为表单的提交事件添加监听器
    feedbackForm.addEventListener('提交反馈', function (e) {
        e.preventDefault(); // 阻止表单默认提交行为

        // 获取用户输入的值
        const name = document.getElementById('name').value;
        const email = document.getElementById('email').value;
        const message = document.getElementById('message').value;

        // 这里可以添加代码将用户反馈信息发送到服务器端进行处理
        // 例如，可以使用AJAX请求将数据发送到后端脚本（如PHP、Python等）

        console.log('姓名：', name);
        console.log('邮箱：', email);
        console.log('留言：', message);

        // 提交成功后可以给出提示信息，这里简单弹出一个提示框
        alert('感谢您的反馈，我们会尽快与您联系！');

        // 清空表单输入框，以便用户再次输入
        document.getElementById('name').value = '';
        document.getElementById('email').value = '';
        document.getElementById('message').value = '';
    });
</script>
</body>

</html>